<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/oa/include/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>流程部署</title>
<link rel="stylesheet" type="text/css" href="${jsAndCss}/css/style.css" />
<link rel="stylesheet" type="text/css"
	href="${jsAndCss}/css/WdatePicker.css" />
<link rel="stylesheet" type="text/css"
	href="${jsAndCss}/css/skin_/table.css" />
<link rel="stylesheet" type="text/css"
	href="${jsAndCss}/css/jquery.grid.css" />
</head>
<body>
	<div id="container">
		<div id="hd"></div>
		<div id="bd">
			<div id="main">
				<div class="search-box ue-clear">
					<div class="search-area">
						<div class="kv-item ue-clear">
							<label>选择时间：</label>
							<div class="kv-item-content ue-clear">
								<span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">全部</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">近3天</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">近一周</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">近一月</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" data-define="define" /> <span
										class="radio"></span>
								</span> <span class="text">自定义</span>
								</span> <span class="define-input"> <input type="text"
									placeholder="开始时间" /> <span class="division"></span> <input
									type="text" placeholder="结束时间" />
								</span>
							</div>
						</div>
						<div class="kv-item ue-clear">
							<label>选择类型:</label>
							<div class="kv-item-content">
								<select>
									<option>全部</option>
									<option>全部</option>
									<option>全部</option>
								</select>
							</div>
						</div>
					</div>
					<div class="search-button">
						<input class="button" type="button" value="搜索一下" />
						<a href="${ctx}/apply/handleIndex"><input class="button" type="button" value="返回上一页" /></a>
					</div>
				</div>

				<div class="table">
					<div class="opt ue-clear">
						<span class="sortarea"> <span class="sort"> <label>排序：</label>
								<span class="name"> <i class="icon"></i> <span
									class="text">名称</span>
							</span>
						</span> <i class="list"></i> <i class="card"></i>
						</span> <span class="optarea"> <a href="javascript:;" class="add">
								<i class="icon"></i> <span class="text">添加</span>
						</a> <a href="javascript:;" class="delete"> <i class="icon"></i> <span
								class="text">删除</span>
						</a> <a href="javascript:;" class="statistics"> <i class="icon"></i>
								<span class="text">统计</span>
						</a> <a href="javascript:;" class="config"> <i class="icon"></i> <span
								class="text">配置</span>
						</a>
						</span>
					</div>

					<div class="grid"></div>

					<div class="pagination"></div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="${jsAndCss}/js/jquery.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/global.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/jquery.select.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/core.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/jquery.pagination.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/jquery.grid.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/WdatePicker.js"></script>
<script type="text/javascript">
	$('select').select();
	var head = [ {
		label : 'ID',
		width : 100,
		sortable : 'default',
		name : 'id'
	}, {
		label : '用户名',
		width : 150,
		sortable : 'default',
		name : 'name'
	}, {
		label : '昵称',
		width : 150
	} ];

	var oper = [ {
		label : "<a href='/ims/apply/leaveHandle'>审批</a>",
		onclick : function() {
			alert("gg");
			
		}
	} ];
	var tbody=[ [ "201301", "admin", "熊猫王子", oper ] ];

	$('.grid').Grid({
		thead : head,
		tbody : null,
		height : 400,
		checkbox : {
			single : true
		},
		operator : {
			type : "normal",
			width : 100
		},
		sortCallBack : function(name, index, type) {
			alert(name + "," + index + ',' + type);
		}

	});

	$('.grid').Grid('addLoading');

	/// 模拟异步
	setTimeout(function() {
		$('.grid').Grid('setData', tbody, head);
	}, 2000)

	$('.pagination').pagination(100, {
		callback : function(page) {
			alert(page);
		},
		display_msg : false
	});

	$('.search-box input[type=radio]').click(function(e) {
		if ($(this).prop('checked')) {
			if ($(this).attr('data-define') === 'define') {
				$('.define-input').show();
			} else {
				$('.define-input').hide();
			}
		}
	});
	
	$(function() {
		$.ajax({
			type : 'post',//请求方式
			url : '${ctx}/apply/leaveTaskListRe',
			//contentType:'application/json',
			//dataType:'json', //有几种格式 xml html json text 等常用
			//data传值的另外一种方式 form的序列化
			//data: {"roleId":1},//传递给服务器的参数				
			success : function(data) {//与服务器交互成功调用的回调函数
				//data就是out.print输出的内容
				console.log(data);
				head = [ {
					label : 'ID',
					width : 100,
					sortable : 'default',
					name : 'ID'
				}, {
					label : '任务名称',
					width : 150,
					sortable : 'default',
					name : '任务名称'
				}, 
				{
					label : '处理人',
					width : 150,
					sortable : 'default',
					name : '处理人'
				}, 
				{
					label : '创建时间',
					width : 150,
					sortable : 'default',
					name : '创建时间'
				},
				{
					label : '流程实例ID',
					width : 150,
					sortable : 'default',
					name : '流程实例ID'
				},
				{
					label : 'formKey',
					width : 150,
					sortable : 'default',
					name : 'formKey'
				}
				
				];
				
				$.each(data,function(i,n){
					oper = [ {
						label : "<a href='/ims/leave/leaveHandle?instanceId="+n.processInstanceId+"'>审批</a>",
						onclick : function() {	
							alert(gg);
						}
					} ];
					tbody[i]=[n.id,n.name,n.assignee,n.createTime,n.processInstanceId,n.formKey,oper]
				});

			}
		});
	});
</script>